<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="1" :offset="0">
          <el-button type="primary" size="default" @click="addteacherlist">{{
            !scene ? "添加" : "取消"
          }}</el-button>
        </el-col>
        <el-col>
          <div style="display: flex; margin-top: 10px" v-show="scene">
            <el-input
              style="margin-right: 20px"
              v-model="pulldataform"
              placeholder="请输入亲子活动视频标题"
            ></el-input>
            <el-button
              type="primary"
              size="default"
              @click="pullmenuPermissionList"
              >确定</el-button
            >
            <el-button
              type="primary"
              size="default"
              @click="canclemenuPermissionList"
              >取消</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-table
      :data="menuPermissionList"
      :tree-props="{ key: 'clcontentid', children: 'children' }"
    >
      <el-table-column prop="title" label="亲子活动视频" width="200">
        <template slot-scope="{ row }">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <div>
              <div style="padding: 10px 0">
                <el-tag type="info">{{ row.title }}</el-tag>
              </div>
              <div style="display: flex; justify-content: center">
                <el-button
                  type="warning"
                  size="mini"
                  @click="addrowchildren(row)"
                  >添加步骤</el-button
                >
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="活动展示步骤">
        <template slot-scope="{ row }">
          <el-table
            :data="row.children"
            v-if="row.children && row.children.length > 0"
            :key="row.vipdetconid"
            :tree-props="{ key: 'clcontentid', children: 'children' }"
          >
            <el-table-column
              prop="vipdetconid"
              label="活动编号"
              width="120"
            ></el-table-column>
            <el-table-column label="活动内容" v-slot="{ row }">
              <el-input
                v-model="row.content"
                v-if="row.staticshow == true"
                focus
                @blur="blurcontent(row)"
              ></el-input>
              <span v-else>{{ row.content }}</span>
            </el-table-column>
            <el-table-column prop="videourl" label="视频链接"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row, $index }">
                <!-- 加号按钮 -->
                <el-button
                  :disabled="row.level === 4"
                  type="warning"
                  icon="el-icon-edit"
                  size="mini"
                  @click="toAddPermission(row)"
                />
                <!-- 删除按钮 -->
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  title="删除"
                />

                <el-drawer
                  :title="row_puppet.content + '视频编辑'"
                  :visible.sync="drawer"
                  size="50%"
                >
                  <div>
                    <el-card shadow="always" :body-style="{ padding: '20px' }">
                      <div slot="header">
                        <span>标题修改</span>
                        <el-input
                          v-model="row_puppet.content"
                          placeholder=""
                          size="normal"
                          clearable
                        ></el-input>
                      </div>
                    </el-card>

                    <el-card shadow="always" :body-style="{ padding: '20px' }">
                      <div slot="header">
                        <span style="color: #9c446e; font-weight: 600">
                          {{ row_puppet.content }}</span
                        >
                        <span>视频上传</span>
                      </div>
                      <!-- card body -->
                      <el-button
                          style="margin-bottom: 10px"
                          size="small"
                          type="danger"
                          @click="submitUpload"
                          >上传到服务器</el-button
                        >
                      <el-upload
                        class="upload-demo"
                        ref="upload"
                        drag
                        action="https://zyc618.mynatapp.cc/api/files/uploads"
                        :limit="1"
                        :file-list="fileList"
                        :auto-upload="false"
                        :on-success="handlesuccess"
                        multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                      </el-upload>
                      
                        <el-button slot="trigger" size="small" type="primary"
                          >选取文件</el-button
                        >
                        
                    
                    </el-card>
                  </div>
                  <div style="padding: 20px 10px">
                    <el-button
                      style="color: #fff; background-color: #cd5a91"
                      @click="pullcontent()"
                      >下一步</el-button
                    >
                    <el-button size="default" @click="canclecontent()"
                      >取消</el-button
                    >
                  </div>
                  <div>
                    <div
                      style="
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        padding: 10px;
                      "
                    >
                      <el-button
                        @click="innerDrawer = true"
                        style="color: #fff; background-color: #9c446e"
                        >查看规划图</el-button
                      >
                    </div>

                    <el-drawer
                      title="家庭教育亲子课"
                      :append-to-body="true"
                      :before-close="handleClose"
                      :visible.sync="innerDrawer"
                    >
                      <div
                        ref="scrollContainer"
                        style="max-height: 600px; overflow-y: auto"
                      >
                        <el-timeline>
                          <el-timeline-item
                            placement="top"
                            color="#cd5a91"
                            v-for="(item, index) in updateMenuId(
                              row_puppet.clcontentid
                            )"
                            :key="index"
                          >
                            <el-card>
                              <h4>{{ item.title }}</h4>
                              <p>{{ item.content }}</p>
                            </el-card>
                          </el-timeline-item>
                        </el-timeline>
                      </div>
                    </el-drawer>
                  </div>
                </el-drawer>
              </template>
            </el-table-column>
          </el-table>
          <span v-else>No Children</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    userid: Number,
    teacherid: Number,
  },
  data() {
    return {
      menuPermissionList: [], // 菜单列表
      drawer: false,
      innerDrawer: false,
      scene: false,
      pulldataform: "", //标题
      textarea2: "", //content具体内容
      row_puppet: {},
      fileList: [],
    };
  },
  methods: {
    submitUpload() {
        this.$refs.upload.submit();
      },
      handlesuccess(response, file, fileList){
        this.row_puppet.videourl = response.data.url
      },
    //随机生成id:
    randid() {
      const timestamp = new Date().getTime(); // 获取当前时间戳

      return this.userid + "-" + timestamp.toString().slice(-8);
    },
    //点击增加对象
    addteacherlist() {
      this.scene = !this.scene;
      // this.$refs.spu.initSpuData(row);
    },
    //新增标题按钮
    pullmenuPermissionList() {
      let randstringid = this.randid();
      this.menuPermissionList.push({
        contentid: randstringid,
        userid: this.userid,
        teacherid: this.teacherid,
        title: this.pulldataform,
        children: [],
      });
      //发起请求;
      this.addtitle_vipcldetail(randstringid);
    },
    //增加数据库中:
    async addtitle_vipcldetail(id) {
      let result = await this.$API.cosingAssistance.addtitle_vipcldetail({
        clcontentid: id,
        userid: this.userid,
        teacherid: this.teacherid,
        title: this.pulldataform,
      });
      if (result.code == 200) {
        this.$message({ message: "增加成功", type: "success" });
      }
    },
    //捕获事线图
    updateMenuId(index1) {
      // 手动更新menuPermissionList中id为700的对象的id属性为100
      const index = this.menuPermissionList.findIndex(
        (menu) => menu.clcontentid == index1
      );
      if (index !== -1) {
        return this.menuPermissionList[index].children;
      }
    },
    //标题取消:
    canclemenuPermissionList() {
      this.pulldataform = "";
      this.addteacherlist();
    },
    //确认详细内容
    pullcontent() {
     this.saveall_vipdetcon()
    },
    //取消按钮
    canclecontent() {
      this.drawer = false;
    },
    //唤起draw并赋值傀儡
    toAddPermission(row) {
      this.row_puppet = row;
      console.log(this.row_puppet);
      this.drawer = true;
    },
    handleClose(done) {
      this.$confirm("是否关闭事线图？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //查询所有亲子课标题数据
    async getallcosingAssistance() {
      let result = await this.$API.cosingAssistance.getallcosingAssistance({
        userid: this.userid,
        teacherid: this.teacherid,
      });
      console.log(result);
      if (result.code == 200) {
        //this.updateMenuId(id,result.data.result)
        this.$message({ message: "查询成功", type: "success" });
        this.menuPermissionList = result.data.data;
      }
    },
    async editcontent(row) {
      let result = await this.$API.cosingAssistance.editcontent(row);
      if (result.code == 200) {
        this.$message({ message: result.data.msg, type: "success" });
      }
    },
    addrowchildren(row) {
      const randid_s = this.randid();
      const index = this.menuPermissionList.findIndex(
        (menu) => menu.clcontentid === row.clcontentid
      );
      if (index !== -1) {
        this.menuPermissionList[index].children.push({
          clcontentid: row.contentid, //父id
          content: "",
          videourl: "",
          vipdetconid: randid_s, //自己的随机id
          staticshow: true,
        });
        //发起请求:
        this.addtitle_vipdetcon(row, randid_s);
      }
    },
    async addtitle_vipdetcon(row, index) {
      let result = await this.$API.cosingAssistance.addtitle_vipdetcon({
        clcontentid: row.contentid || row.clcontentid, //父id
        vipdetconid: index, //自己的随机id
      });
      if (result.code == 200) {
        this.$message({ message: result.data.msg, type: "success" });
      }
    },
    //失去焦点回调函数:
    blurcontent(row) {
      //发起修改请求:
      this.edit_vipdetcon(row);
      row.staticshow = false;
    },
    async edit_vipdetcon(row) {
      let result = await this.$API.cosingAssistance.edit_vipdetcon({
        content: row.content,
        vipdetconid: row.vipdetconid, //自己的随机id
      });
      if (result.code == 200) {
        this.$message({ message: "编辑完毕", type: "success" });
      }
    },
    //保存所有信息:
    async saveall_vipdetcon() {
      let result = await this.$API.cosingAssistance.saveall_vipdetcon(this.row_puppet);
      if (result.code == 200) {
        this.$message({ message: "编辑完毕", type: "success" });
      }
    },
  },
  computed: {},
  mounted() {
    this.getallcosingAssistance();
  },
};
</script>

<style></style>
